import React, { Component } from 'react';
import {
	StyleSheet, Text, View, Image, TouchableOpacity
} from "react-native";
import { GLOBAL } from '../../config/global';
import { style } from '../../theme/style';
const scale = GLOBAL.SCALE;
export class HeadTab extends Component {
	constructor(props) {
		super(props);
	}

	/* 
		data:数据   
		initIndex：初始化
		tabClick：点击 
	*/
	render () {
		let imgObj = require('../../imgs/apply/triangle.png');
		let { data, tabClick, initIndex } = this.props;
		return (
			<View style={styles.tabTop}>
				{
					data.map((item, index) => {
						return (
							<TouchableOpacity activeOpacity={1} key={index} onPress={() => { item.singClick ? item.singClick(index) : (tabClick && tabClick(index)) }} style={styles.tabBox}>
								<Text style={styles.TabText}>{item.title}</Text>
								{
									initIndex == index ? <Image source={imgObj} /> : null
								}
							</TouchableOpacity>
						)
					})
				}
			</View >
		)
	}
}
const styles = StyleSheet.create({
	tabTop: {
		height: 40 * scale,
		backgroundColor: style.color.themeColor,
		flexDirection: 'row',
		justifyContent: 'space-around',
		alignItems: 'center'
	},
	tabBox: {
		flex: 1,
		height: 40 * scale,
		marginTop: 5 * scale,
		alignItems: 'center',
		justifyContent: 'space-between'
	},
	TabText: {
		fontSize: 14 * scale,
		color: style.color.white,
		textAlign: 'center'
	},
})